<template>
  <div class="wrapper">
    <Card class="category">
      <div
        :class="{ active: i == selectedIndex }"
        class="category-item"
        v-for="(typeItem, i) in pageTypes"
        :key="typeItem.type"
      >
        <div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
      </div>
    </Card>
    <Card class="content">
      <Button type="primary" @click="handleAdd()">添加页面</Button>
      <div class="list">
        <Spin size="large" fix v-if="loading"></Spin>
        <div class="item item-title">
          <div>页面名称</div>
          <div class="item-config">
            <div>状态</div>
            <div>操作</div>
          </div>
        </div>

        <div class="item" v-for="(item, index) in list" :key="index">
          <div>{{ item.name || "暂无模板昵称" }}</div>
          <div class="item-config">
            <i-switch v-model="item.pageShow" @on-change="changeSwitch(item)">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
            <Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
            <Poptip confirm title="删除此模板？" @on-ok="handleDel(item)">
              <Button type="error" size="small">删除</Button>
            </Poptip>
          </div>
        </div>
        <div class="no-more" v-if="list.length ==0">暂无更多模板</div>
      </div>
      <Page
        :total="total"
        size="small"
        @on-change="changePageNum"
        :current="params.pageNumber"
        :page-size="params.pageSize"
        show-sizer
        :page-size-opts="[10, 20, 50]"
        @on-page-size-change="changePageSize"
      />
    </Card>
  </div>
</template>
<script>
import * as API_Other from "@/api/other.js";
export default {
  // components: {region},
  data() {
    return {
      selectedIndex: 0, // 装修那个页面的下标
      columns: [
        // 表头
        {
          title: "页面名称",
          key: "name"
        },
        {
          title: "状态"
        },
        {
          title: "操作",
          key: "action"
        }
      ],

      loading: false, // 加载状态
      pageTypes: [
        // 装修类型
        {
          type: "INDEX",
          title: "首页"
        },
        {
          type: "SPECIAL",
          title: "专题",
        },
        //  {
        //   type: "ALERT",
        //   title: "开屏广告",
        // },
        // {
        //   type: "OPEN_SCREEN_ANIMATION",
        //   title: "app开屏页面",
        // },
      ],
      params: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        sort: "createTime",
        order: "desc",
        pageType: "INDEX",
        pageClientType: "H5"
      },
      total: 0, // 页面数量
      list: [] // 总数据
    };
  },
  watch: {
    // params: {
    //   handler(val) {
    //     // this.pageNumber++;
    //     this.init();
    //   },
    //   deep: true,
    // },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 切换tab
     clickType(val, index) {
      if (val == "ALERT") {
        this.$router.push({
          path: "/floorList/main",
          query: { pagetype: val },
        });
        return;
      } else if (val == "OPEN_SCREEN_ANIMATION") {
        this.$router.push({
          path: "/floorList/main",
          query: { pagetype: val },
        });
        return;
      } else {
        this.params.pageNumber = 1;
        this.selectedIndex = index;
        this.params.pageType = val;
        this.init();
      }
    },

    // 分页 修改页码
    changePageNum (val) {
      this.params.pageNumber = val;
      this.init();
    },
    // 是否发布
    changeSwitch(item) {
      this.loading = true;
      API_Other.releasePageHome(item.id).then(res => {
        if (res.result) {
          this.loading = false;
          this.$Message.success("发布成功");
          this.init();
        }

        this.init();

        this.loading = false;
      });
    },
    // 初始化数据
    init() {
      this.loading = true;
      API_Other.getHomeList(this.params).then(res => {
        if (!res.result) return false;
        this.loading = false;
        res.result.records.forEach(item => {
          if (item.pageShow == "OPEN") {
            item.pageShow = true;
          } else {
            item.pageShow = false;
          }
        });
        this.list = res.result.records;
        this.total = res.result.total;
      });
    },
    // 装修楼层
    handleEdit(val) {
      this.$router.push({
        path: "/floorList/main",
        query: {
          id: val.id,
          name: val.name,
          type: val.pageShow,
          pagetype: this.params.pageType,
        },
      });
    },
    // 添加模板
    handleAdd() {
      this.$router.push({
        path: "/floorList/main",
        query: { pagetype: this.params.pageType },
      });
    },
    // 分页 改变页数
    changePageSize(v) {
      this.params.pageNumber = 1;
      this.params.pageSize = v;
      this.init();
    },
    // 删除模板
    handleDel(val) {
      this.loading = true;
      API_Other.removePageHome(val.id).then(res => {
        if (res.result) {
          this.loading = false;
          this.init();
          this.$Message.success("删除成功");
        }

        this.loading = false;
      });
    }
  }
};
</script>
<style scoped lang="scss">
.category-item {
  cursor: pointer;
  padding: 4px;
}
.active {
  background: #ededed;
}
.item-title {
  background: #d7e7f5 !important;
  height: 54px;
}
.no-more {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper {
  background: #fff;
  padding: 20px;
  display: flex;
}
.category {
  flex: 2;
}
.content {
  flex: 8;
}
* {
  margin: 5px;
}
.list {
  min-height: 600px;
  position: relative;
}
.item:nth-of-type(2) {
  margin: 0 5px;
}
.item {
  width: 100% !important;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  > .item-config {
    width: 180px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.item:nth-of-type(2n + 1) {
  background: #f5f7fa;
}
</style>
